<template>
  <div class="paycontentBox">
    <el-row>
      <el-col :span="20" class="nav-left-box">
        <div class="hintLogo">
          <img src="../../../assets/digital_Asset_pay/zhifuchenggong.png">
        </div>
        <div class="nav-title">
          <div class="nav-title-top">订单提交成功!请尽快付款~</div>
          <div class="nav-title-bottom">
            请在
            <span>{{ residueTime }}</span>内完成支付，超时后将取消订单
          </div>
        </div>
      </el-col>
      <el-col :span="4" class="nav-right-box">
        <div class="nav-money">
          应付金额：
          <span>{{ order.totalPrice }}</span>元
        </div>
        <div class="nav-order" @click="showInfo=!showInfo">
          订单详情
          <i :class="showInfo===true ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"/>
        </div>
      </el-col>
    </el-row>
    <!-- 订单列表 -->
    <div style="margin-top: 20px;">
      <el-collapse-transition>
        <div v-show="showInfo" class="courseOrder">
          <div style="margin-bottom:20px;">
            <span class="courseLabel">订单号：</span>
            <span class="courseDetails" style="color:#f21d1d;font-weight: 600;">{{ order.code }}</span>
          </div>
          <div style="margin-bottom:20px;">
            <span class="courseLabel">买方信息：</span>
            <span class="courseDetails">{{ order.buyerName }}</span>
          </div>
          <div style="margin-bottom:20px;">
            <span class="courseLabel">资产信息：</span>
          </div>
          <div class="courseList-box">
            <div v-for="(item,index) in orderDetail " :key="index" class="courseList">
              <img v-if="item.coverUrl" :src="item.coverUrl" alt>
              <img v-if="!item.coverUrl" src="../../../assets/subjectImg.png" alt>
              <div class="courseList-con">
                <div class="courseList-headline">{{ item.itemName }}</div>
                <div class="courseList-money">
                  <span>{{ item.price }}</span> X {{ item.amount }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-collapse-transition>
    </div>
    <div class="paymenTitle">选择以下支付方式付款</div>
    <div class="paymentBox">
      <div class="payment-platform">支付平台</div>
      <ul>
        <li @click="showDialog(0)">
          <img src="../../../assets/digital_Asset_pay/weixinpay.png">
        </li>
        <li @click="showDialog(1)">
          <img src="../../../assets/digital_Asset_pay/payOnline_zfb.png">
        </li>
      </ul>
    </div>
    <!-- 微信支付扫码弹框 -->
    <el-dialog
      :visible.sync="weixinQRcodeDialogVisible"
      :before-close="handleClose"
      title="微信支付"
      width="20%"
    >
      <div style="text-align:center;">
        <div>
          <input type="hidden" id="urlCode" value="${urlCode}">
          <input type="hidden" id="id" value="${id}">
          <div id="qrcode" style="display: flex;justify-content: center;"></div>
        </div>
        <div style="margin:10px 0;">
          请使用
          <span style="color:#f21d1d;margin:0 5px;">微信</span>扫一扫
        </div>
        <div>二维码完成支付</div>
      </div>
    </el-dialog>
    <!-- 支付宝支付扫码弹框 -->
    <el-dialog :visible.sync="zhifubaoQRcodeDialogVisible" :before-close="handleClose" title="支付宝支付" width="20%">
      <div style="text-align:center;">
        <div>
          <img src="../../../assets/distribution/QRcode.png" style="width:250px;">
        </div>
        <div style="margin:10px 0;">
          请使用
          <span style="color:#f21d1d;margin:0 5px;">支付宝</span>扫一扫
        </div>
        <div>二维码完成支付</div>
      </div>
    </el-dialog>

    <!-- 支付成功弹框 -->
    <el-dialog
      :visible.sync="successDialogVisible"
      :before-close="handleClose"
      title="支付完成"
      width="20%"
    >
      <div style="text-align:center;">
        <div>
          <img src="../../../assets/digital_Asset_pay/zhifuchenggong.png" style="width:250px;">
        </div>
        <div style="margin:20px 0;font-size:18px;font-weight:600;color:#000;">支付成功</div>
      </div>
    </el-dialog>
    <!-- 支付失败弹框 -->
    <el-dialog
      :visible.sync="defeatDialogVisible"
      :before-close="handleClose"
      title="支付失败"
      width="20%"
    >
      <div style="text-align:center;">
        <div>
          <img src="../../../assets/digital_Asset_pay/zhifushibai.png" style="width:250px;">
        </div>
        <div style="margin:20px 0;font-size:18px;font-weight:600;color:#000;">支付失败</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  import { getTenantId } from '@/utils/auth'
  import { alipayTrade, checkPay, getOrderById, getOrderDetail, updateOrder, wxpay } from '@/api/subject/digitalAssets' // 数据接口
  export default {
    data() {
      return {
        residueTime: '1小时30分',
        showInfo: true,
        // 支付平台弹框是否显示
        weixinQRcodeDialogVisible: false,
        zhifubaoQRcodeDialogVisible: false,
        // 支付状态弹框是否显示
        payDialogVisible: false,
        successDialogVisible: false,
        defeatDialogVisible: false,
        order: {},
        transaction: {},
        orderDetail: [],
        orderId: '',
        QRcodeData: '',
        timer: null //定时器名称
      }
    },
    created() {
      this.countTime()
      this.getData()
    },
    mounted() {
      this.timer = setInterval(() => {
        if (this.QRcodeData) {
          this.checkPay()
        }
      }, 3000)
    },
    destroyed() {
      clearInterval(this.timer)　　// 清除定时器
      this.timer = null
    },
    methods: {
      getData() {
        if (this.$route.params.orderId) {
          getOrderById(this.$route.params.orderId).then(res => {
            this.order = res.data.item
          })
          getOrderDetail(this.$route.params.orderId).then(res => {
            this.orderDetail = res.data.tableData
          })
        }
      },
      checkPay() {
        checkPay(this.order.id).then(res => {
          console.log(res.data)
          if (res.data === 'SUCCESS') {
            this.successDialogVisible = true
            this.order.payType = 'vxPay'
            this.order.status = 'TRADE_FINISHED'
            delete this.order.createTimeStr
            delete this.order.createTimeTimeStr
            delete this.order.endTimeStr
            delete this.order.endTimeTimeStr
            delete this.order.orderTimeStr
            delete this.order.orderTimeTimeStr
            delete this.order.payTimeStr
            delete this.order.payTimeTimeStr
            delete this.order.startTimeStr
            delete this.order.startTimeTimeStr
            delete this.order.updateTimeStr
            delete this.order.updateTimeTimeStr
            updateOrder(this.order).then(() => {
              this.$router.push({ name: 'Buyasset' })
            })
          }
        })
      },
      countTime() {
        // 获取当前时间
        let now = new Date().getTime()
        // 设置截止时间
        let end = now + 1.5 * 60 * 60 * 1000
        // 时间差
        let leftTime = end - now
        // 定义变量 d,h,m,s保存倒计时的时间
        if (leftTime >= 1) {
          // let d = Math.floor(leftTime / 1000 / 60 / 60 / 24)
          let h = Math.floor(leftTime / 1000 / 60 / 60 % 24)
          let m = Math.floor(leftTime / 1000 / 60 % 60)
          let s = Math.floor(leftTime / 1000 % 60)
          this.residueTime = `${h}小时${m}分钟${s}秒`
        }

        let times = setTimeout(this.countTime, 1000)
        if (leftTime <= 1) {
          clearTimeout(times)
          this.$router.push({ name: 'Buyasset' })
        }
      },
      showDialog(num) {
        if (this.order.totalPrice <= 0) {
          this.successDialogVisible = true
          this.order.payType = 'free'
          this.order.status = 'TRADE_FINISHED'
          delete this.order.createTimeStr
          delete this.order.createTimeTimeStr
          delete this.order.endTimeStr
          delete this.order.endTimeTimeStr
          delete this.order.orderTimeStr
          delete this.order.orderTimeTimeStr
          delete this.order.payTimeStr
          delete this.order.payTimeTimeStr
          delete this.order.startTimeStr
          delete this.order.startTimeTimeStr
          delete this.order.updateTimeStr
          delete this.order.updateTimeTimeStr
          updateOrder(this.order).then(() => {
            this.$router.push({ name: 'Buyasset' })
          })
        } else {
          if (num === 0) {
            wxpay(this.order.id).then(res => {
              this.weixinQRcodeDialogVisible = true
              this.QRcodeData = res.data
              setTimeout(() => {
                this.qrcode()
              }, 0)
            })
          } else if (num === 1) {
            const payParams = {}
            payParams.orderCode = this.order.code
            payParams.totalPrice = this.order.totalPrice
            payParams.orderName = this.order.code
            payParams.description = ''
            payParams.tenantId = getTenantId()
            alipayTrade(payParams).then(res => {
              const div = document.createElement('div')
              div.innerHTML = res.data
              document.body.appendChild(div)
              document.forms[0].submit()
              // this.$router.push({ name: 'Merchant' })
            })
          }
        }
      },
      handleClose(done) {
        done()
        let qrcodeDiv = document.getElementById('qrcode')
        qrcodeDiv.innerHTML = ''
      },
      qrcode() {
        new QRCode('qrcode', {
          width: 350,
          height: 350,
          text: this.QRcodeData, // 二维码地址
          colorDark: '#000',
          colorLight: '#fff'
        })
      }
    }
  }
</script>

<style lang="scss">
  .paycontentBox {
    margin-top: 30px;
    padding: 0 20px;
    font-size: 14px;
    color: #626669;

    .nav-left-box {
      display: flex;
      align-items: center;

      .hintLogo {
        width: 86px;
        height: 86px;
        margin-right: 40px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .nav-title {
        .nav-title-top {
          color: #000;
          font-size: 28px;
          margin-bottom: 20px;
        }

        .nav-title-bottom {
          font-size: 14px;

          span {
            color: #f21d1d;
            font-weight: 600;
          }
        }
      }
    }

    .nav-right-box {
      text-align: right;

      .nav-money {
        span {
          color: #f21d1d;
          font-weight: 600;
          font-size: 24px;
        }
      }

      .nav-order {
        cursor: pointer;
        margin-top: 20px;
        width: 80px;
        float: right;
      }
    }

    .courseOrder {
      padding: 25px;
      border: 1px solid #e9ebf0;

      .courseLabel {
        width: 70px;
        text-align: left;
        display: inline-block;
      }

      .courseDetails {
        margin-left: 20px;
      }
    }

    .courseList-box {
      background-color: #fafbfb;
      padding: 20px 20px 1px;

      .courseList {
        margin-bottom: 20px;
        display: flex;

        img {
          width: 160px;
          height: 112px;
          margin-right: 20px;
        }

        .courseList-headline {
          margin: 15px 0;
          font-size: 18px;
          color: #000;
        }

        .courseList-money {
          margin-top: 20px;

          span {
            color: #f21d1d;
            font-weight: 600;
            font-size: 18px;
          }
        }
      }
    }

    .paymenTitle {
      background-color: #f0f3ff;
      padding: 15px 20px;
      margin-top: 30px;
      color: #585858;
    }

    .paymentBox {
      padding: 0 20px;

      .payment-platform {
        margin: 20px 0;
      }

      ul {
        padding: 0;
        margin: 0;
        list-style: none;
        overflow: hidden;
        width: 85%;

        li {
          float: left;
          margin-right: 15px;
          margin-bottom: 15px;
        }

        .lastLi {
          width: 178px;
          height: 62px;
          text-align: center;
          line-height: 62px;
          font-size: 18px;
          border: 1px solid #e0e0e0;
        }
      }
    }
  }
</style>
